<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="lib/ol.css">-->
    <!--<script src="lib/ol.js"></script>-->
    <link rel="stylesheet" href="http://openlayers.org/en/v3.17.1/css/ol.css" type="text/css">
    <title>Openlayers map 1</title>
    <script src=" http://openlayers.org/en/v3.17.1/build/ol.js" type="text/javascript"></script>
    <style>
        .map{
            height:800px;
            width: 100%;
        }
        input{
            padding: 5px;
            margin-top: 10px;
        }
    </style>

</head>
<body>
    <!--<h2>My Map</h2>-->
    <div id="map" class="map"></div>
    <input id="zoom-out" value="Zoom-Out" type="button">
    <input id="zoom-in" value="Zoom-In" type="button">
    <script src="js/ol-test1.js"></script>
</body>
</html>